<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '@/stores';
const store = useUserStore();
const showPager = ref(true);
const emailEmpty = ref(false);
const errorStatus = ref(false);
const fieldValue = ref('');
const passwordEmpty = ref(false);
const email = ref('qianxiangsmail@gmail.com');
const password = ref('FileQX');
const jumpToNext = async () => {
  if (email.value.trim() === '') {
    emailEmpty.value = true;
    return;
  }
  try {
    const result = await store.setUser(email.value.trim());
    if (result.status === 200) {
      showPager.value = false;
    }
  } catch (error: any) {
    fieldValue.value = error.response.data;
    errorStatus.value = true;
  }
};
const loginUp = async () => {
  if (password.value.trim() === '') {
    passwordEmpty.value = true;
    return;
  }
  try {
    const result = await store.userLogin({ account: email.value.trim(), password: password.value.trim() });
    console.log(result, '登录');
  } catch (error) {
    console.log(error);
  }
};
</script>

<template>
  <div class="login-page index-content">
    <div class="flex items-center justify-center px-2.5 md:px-6 h-screen">
      <div class="w-full max-w-xl text-center">
        <div class="mb-14">
          <div>
            <b class="mb-10 block text-xl font-bold"> FileQX </b>
          </div>
          <h1 class="mb-0.5 text-3xl font-extrabold md:text-4xl">{{ showPager ? '欢迎回来！' : '你是Jane吗？' }}</h1>
          <h2 class="text-xl font-normal md:text-2xl">
            {{ showPager ? '请输入您的电子邮件以登录' : '通过密码确认您' }}
          </h2>
        </div>
        <form v-if="showPager" class="items-start mb-12 space-y-4 md:flex md:space-x-4 md:space-y-0">
          <div class="w-full text-left">
            <input
              v-model="email"
              placeholder="输入您的电子邮件"
              type="email"
              class="input-color dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
            />
            <span v-if="emailEmpty" class="text-xs text-left text-red-600">The E-Mail field is required</span>
            <span v-if="passwordEmpty" class="text-xs text-left text-red-600">The User Password field is required</span>
            <span v-if="errorStatus" class="text-xs text-left text-red-600">{{ fieldValue }}</span>
          </div>
          <button
            @click="jumpToNext"
            class="btn-border group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg px-7 py-2.5 dark:border-gray-300 justify-center w-full md:w-min"
          >
            <span class="pr-1 text-lg font-extrabold"> 下一步 </span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              style="color: #00bc7e"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather text-theme -mr-1 feather feather-chevron-right"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </form>
        <form v-else class="items-start mb-12 space-y-4 md:flex md:space-x-4 md:space-y-0">
          <div class="w-full text-left">
            <input
              v-model="password"
              placeholder="输入您的密码"
              type="password"
              class="input-color dark:placeholder:text-gray-600 focus-border-theme h-full w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
            />
          </div>
          <button
            @click="loginUp"
            class="btn-border group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300 justify-center w-full md:w-min"
          >
            <span class="pr-1 text-lg font-extrabold"> 登入 </span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather text-theme -mr-1 feather feather-chevron-right"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </form>
        <span v-if="showPager" class="block">
          没有帐户？
          <router-link to="/register" class="font-bold text-theme"> 注册账户。 </router-link></span
        >
        <span v-else class="block">
          忘记了你的密码？
          <router-link to="/forgottenPassword" class="font-bold text-theme"> 重设密码 </router-link></span
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/login.scss';
</style>
